
<style scoped>
  .pug_nav{
    position: absolute;
    width: 240px;
    height: 100%;
    background: #6e0730;
  }
</style>


<template>
  <div class="pug_nav">
    <el-menu
        default-active="1"
        class="el-menu-vertical-demo"
        :collapse="isCollapse"
        @open="handleOpen"
        @close="handleClose"
    >
      <el-sub-menu>
        <template #title>
          <el-icon><Setting /></el-icon>
          <span>用户管理</span>
        </template>
        <el-menu-item index="1" @click="handRouter('/user')">
          <template #title>用户列表</template>
        </el-menu-item>
      </el-sub-menu>
    </el-menu>
    <el-menu
        default-active="2"
        class="el-menu-vertical-demo"
        :collapse="isCollapse"
        @open="handleOpen"
        @close="handleClose"
    >
      <el-sub-menu>
        <template #title>
          <el-icon><Setting /></el-icon>
          <span>订单管理</span>
        </template>
        <el-menu-item index="3" @click="handRouter('/user')">
          <template #title>全部订单</template>
        </el-menu-item>
        <el-menu-item index="4" @click="handRouter('/user')">
          <template #title>订单列表</template>
        </el-menu-item>
      </el-sub-menu>
    </el-menu>
    <el-menu>
      <el-menu-item index="4" @click="handRouter('/setting')">
        <el-icon><Bell /></el-icon>
        <template #title>系统设置</template>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script setup>

  import {useRouter} from "vue-router";
  const router = useRouter();
  const handRouter = (path)=>{
    router.push(path);
  }

</script>
